<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>公寓管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!--头部样式-->
    <div class="layui-header">
        <div class="layui-logo">公寓管理</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="static/img/head.png" class="layui-nav-img">
                    admin
                </a>
            </li>
            <li class="layui-nav-item"><a href="login.html">退了</a></li>
        </ul>
    </div>
    <!-- 左侧导航区域 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree layui-nav-side" id="menu" style="margin-top: 55px;" lay-filter="treenav">
                <!--                其内部为左侧框的值-->
            </ul>
        </div>
    </div>

    <!--首页，点击左侧菜单栏的存留-->
    <div class="layui-tab layui-tab-brief" lay-filter="contentnav" lay-allowClose="true"
         style="margin-left:200px;margin-top:55px;">
        <ul class="layui-tab-title">
            <li class="layui-this">首页</li>
        </ul>
        <ul class="layui-bg-green rightmenu" style="display: none;position: absolute;">
            <li data-type="closethis">关闭当前</li>
            <li data-type="closeall">关闭所有</li>
        </ul>
        <div class="layui-tab-content" style="padding:0;">
            <div class="layui-tab-item layui-show">
                <img src="/static/img/juan.jpg">
                <!-- 	<iframe data-frameid="2" scrolling="auto" frameborder="0" src="http://www.baidu.com" style="width: 100%; height: 710px;"></iframe> -->
            </div>
        </div>
    </div>

    <!-- 脚部区域样式 -->
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        公寓管理 - 底部固定区域
    </div>

</div>

<!--js代码部分-->
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/layui/layui.js"></script>
<script>


    //JavaScript代码区域
    layui.use('element', function() {
        var element = layui.element;
        var $ = jQuery;

        $.ajax({
            url: "/UserServlet?method=permissions",
            type: "get",
            dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    $.each(res.data, function (i, obj) {
                        if (obj.hierarchy == 1) {
                            $("#menu").append('<li class="layui-nav-item">\n' +
                                '\t\t\t<a href="javascript:;">\n' +
                                obj.linkname +
                                '\t\t\t</a>\n' +
                                '\t\t\t<dl class="layui-nav-child" id = "' + obj.superior + '">\n' +
                                '\t\t\t</dl>\n' +
                                '\t\t</li>'
                            );
                        }
                    });
                    ///view/logistics/list.html
                    // /view/record/list.html
                    $.each(res.data, function (i, obj) {
                        console.log(obj);
                        if (obj.hierarchy == 2) {
                            $("#"+obj.superior).append('<li class="layui-nav-item">'+
                                '<a href="javascript:;" class="site-url" data-title="'+obj.linkname+ '"' +
                                ' data-id="'+i+ '"' +
                                ' data-url="'+obj.monikeri+'">'+
                                obj.linkname+'</a></li>'
                            );
                        }
                    });
                    element.render();
                }
            }
        });

        var active = {
            tabAdd: function(url, id, name) {
                element.tabAdd('contentnav', {
                    title: name,
                    content: '<iframe data-frameid="' + id +
                        '" scrolling="auto" frameborder="0" src="' + url +
                        '" style="width:100%;"></iframe>',
                    id: id
                });
                rightMenu();
                iframeWH();
            },
            tabChange: function(id) {
                element.tabChange('contentnav', id);
            },
            tabDelete: function(id) {
                element.tabDelete('contentnav', id);
            },
            tabDeleteAll: function(ids) {
                $.each(ids, function(index, item) {
                    element.tabDelete('contentnav', item);
                });
            }
        };
        $(document).on('click',".site-url", function() {
            var nav = $(this);
            var length = $("ul.layui-tab-title li").length;
            if (length <= 0) {
                active.tabAdd(nav.attr("data-url"), nav.attr("data-id"), nav.attr("data-title"));
            } else {
                var isData = false;
                $.each($("ul.layui-tab-title li"), function() {
                    if ($(this).attr("lay-id") == nav.attr("data-id")) {
                        isData = true;
                    }
                });
                if (isData == false) {
                    active.tabAdd(nav.attr("data-url"), nav.attr("data-id"), nav.attr("data-title"));
                }
                active.tabChange(nav.attr("data-id"));
            }
        });

        function rightMenu() {
            //右击弹出
            $(".layui-tab-title li").on('contextmenu', function(e) {
                var menu = $(".rightmenu");
                menu.find("li").attr('data-id', $(this).attr("lay-id"));
                l = e.clientX;
                t = e.clientY;
                menu.css({
                    left: l,
                    top: t
                }).show();
                return false;
            });
            //左键点击隐藏
            $("body,.layui-tab-title li").click(function() {
                $(".rightmenu").hide();
            });
        }
        $(".rightmenu li").click(function() {
            if ($(this).attr("data-type") == "closethis") {
                active.tabDelete($(this).attr("data-id"));
            } else if ($(this).attr("data-type") == "closeall") {
                var tabtitle = $(".layui-tab-title li");
                var ids = new Array();
                tabtitle.each(function(i) {
                    ids.push($(this).attr("lay-id"));
                });
                //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
                active.tabDeleteAll(ids);
            }
            $('.rightmenu').hide(); //最后再隐藏右键菜单
        });

        function iframeWH() {
            var H = $(window).height() - 80;
            $("iframe").css("height", H + "px");
        }
        $(window).resize(function() {
            iframeWH();
        });
    });
</script>
</body>
</html>
